<template>
	<view class="addressContainer">
		<!-- 收货地址 -->
		<view class="addressGPS">
			<view class="address" @click="changeAddress">
				上海市
				<u-icon :name="cityIcone" size="20" class="addressIcon"></u-icon>
			</view>
			<view class="searchAddress">
				<u-icon class="searchIcon" name="search" color="gary" size="24"></u-icon>
				<input class="searchInput" type="text" v-model="searchValue" placeholder="请输入您的收货地址" />
			</view>
		</view>
		<!--  -->
		<view class="myAddressContainer" v-show="!cityList">
			<scroll-view scroll-y="true" style="height: calc(100vh - 54rpx);" >
				<view class="myAddress">我的收货地址</view>
				<view class="defaultAddress">
					<view class="addressHome">方舟园</view>
					<view class="personXinXi">4村18栋101</view>
					<view class="userNameAndPhone">
						<span class="nameStart">余</span>
						<span class="nameEnd">先生</span>
						<span class="phoneNumber">123456789</span>
					</view>
					<u-icon name="checkbox-mark" color="green" class="yesAddress"></u-icon>
				</view>
				<view class="myAddress">当前地址</view>
				<view class="currentAddress">
					<view class="current">
						方舟园
						<view class="myCurrentAddress">松江区谷阳北路526弄</view>
					</view>
					<view>重新定位</view>
				</view>
				<view class="myAddress">附近地址</view>
				<view class="otherAddress" v-for="addressItem in addressData" :key="addressItem">
					<view class="otherAddressItem">{{addressItem.title}}</view>
					<view class="otherAddress1">{{addressItem.address}}</view>
					<view class="addressBorderBottom"></view>
				</view>
<!-- 				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view>
				<view class="otherAddress">
					<view class="otherAddressItem">方舟园</view>
					<view class="otherAddress1">松江区谷阳北路526弄1</view>
					<view class="addressBorderBottom"></view>
				</view> -->
			</scroll-view>
		</view>
		<!-- 城市列表 -->
		<view class="cityContainer" v-show="cityList">
			<scroll-view scroll-y="true" style="height: calc(100vh - 54rpx);">
				<view class="openCity">已开通以下城市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="cityAddressItem">上海市</view>
				<view class="moreCity">更多城市即将开放,</view>
			</scroll-view>
		</view>
		<!-- 底部 添加新地址 -->
		<view class="addNewAddressContainer"><button class="addNewAddress" @click="toAddAddress">+添加新地址</button></view>
	</view>
</template>
<script>
import QQMapWX from '../../utils/qqmap-wx-jssdk.js';
export default {
	data() {
		return {
			searchValue: '',
			cityList: false, // 控制是否展开收货城市列表
			cityIcone: 'arrow-down-fill',
			addressData:[],
		};
	},
	methods: {
		toAddAddress() {
			uni.navigateTo({
				url: '../addAddress/addAddress'
			});
		},
		changeAddress() {
			this.cityList = !this.cityList;
			if (this.cityList == false) {
				this.cityIcone = 'arrow-down-fill';
			} else {
				this.cityIcone = 'arrow-up-fill';
			}
		},
		
		getAddress(){
			let that = this
			var qqmapsdk = new QQMapWX({
				key: 'M5YBZ-D6SKP-ULUDF-V3RNF-7NSM3-RMF2D' // 必填
			});
				uni.getLocation({
					//获取经纬度
					type: 'gcj02',
					success: function(res) {
						qqmapsdk.reverseGeocoder({
							//调用腾讯地图api逆地址解析
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							get_poi: 1, //是否返回周边列表
							 success(res) {
								// console.log(res.result);
								that.addressData = res.result.pois
								console.log(that.addressData)
							}
						});
					}
				});
		}
	},
	async mounted(){
		await this.getAddress()
	}
};
</script>
<style scoped lang="scss">
page {
}
.addressContainer {
	position: relative;
	height: 100%;
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}
	.addressGPS {
		display: flex;
		justify-content: space-around;
		padding-bottom: 10rpx;
		.searchAddress {
			position: relative;
			.searchIcon {
				position: absolute;
				top: 0;
				left: 20rpx;
			}
			.searchInput {
				width: 520rpx;
				border-radius: 50rpx;
				padding-left: 50rpx;
				background-color: pink;
			}
		}
	}
	.myAddressContainer {
		.myAddress {
			padding: 0 20rpx;
			height: 40rpx;
			background-color: pink;
		}
		.defaultAddress {
			padding: 20rpx;
			position: relative;
			.personXinXi {
				font-size: 22rpx;
				color: gray;
			}
			.userNameAndPhone {
				font-size: 22rpx;
				color: gray;
			}
			.yesAddress {
				position: absolute;
				right: 40rpx;
				top: 60rpx;
			}
		}
		.currentAddress {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			.current {
				.myCurrentAddress {
					font-size: 22rpx;
					color: gray;
				}
			}
		}
		.otherAddress {
			margin: 20rpx;
			.otherAddress1 {
				font-size: 22rpx;
				color: gray;
			}
			.addressBorderBottom {
				border-bottom: 1px solid red;
				margin-top: 20rpx;
			}
		}
	}
	.cityContainer {
		.openCity {
			padding: 10rpx 20rpx 10rpx;
			font-size: 28rpx;
			color: gray;
			background: pink;
		}
		.cityAddressItem {
			border-bottom: 1rpx solid gray;
			margin: 20rpx;
			padding-bottom: 20rpx;
		}
	}
	.addNewAddressContainer {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: #fff;
		.addNewAddress {
			width: 600rpx;
			background: red;
			border-radius: 50rpx;
			color: white;
		}
	}
}
</style>
